import React from 'react';
import {Card,Table} from "antd";
import LogFactory from "log/LogFactory";
import userColumns from "columns/UserColumns";
import {useAppDispatch, useAppSelector} from "../../../redux/hook";
import {fetchUserPageData} from "../../../redux/reducer/userReducer";
import TableToolbar from "common/table/TableToolbar";


const log = LogFactory.getLog("UserListComponent") ;
const UserListComponent = () => {
    const dispatch = useAppDispatch() ;
    const userState = useAppSelector(state => state.user) ;

    // log.debug("redux请求数据状态" ,userState.status) ;
    // 如果状态是默认值请求数据
    if (userState.status === 0) {
        dispatch(fetchUserPageData({current: 1, pageSize: userState.pageSize})) ;
    }

    const pageOnChange = (page: number, pageSize: number) => {
        // log.debug("分页查询",page,pageSize) ;
        dispatch(fetchUserPageData({current: page, pageSize: pageSize})) ;
    } ;

    return (
        <Card
            title={"用户列表"}
            extra={ "其他操作" }
        >
            <TableToolbar titleContent={userState.total}/>
            <Table
                loading={userState.loading}
                columns={userColumns}
                dataSource={userState.data}
                pagination={{
                    total: userState.total,
                    current: userState.current,
                    pageSize: userState.pageSize,
                    onChange: pageOnChange
                }}
            />
        </Card>
    );
};

export default UserListComponent;